<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<form id="addBookForm" enctype="multipart/form-data">
    <!--    // 图片上传-->
    <input id="rightupload" type="file" name="file" value=""/>
    <img id="usrightimg" src="" alt="" style="width: 75px;height: 80px">

    <br>
    <input value="提交" type="button" id="submit">
</form>


<script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../css/jquery-form.js"></script>

<script>
    // 用于form表单提交后不跳转
    /*function addBook() {
        $("#addBookForm").ajaxSubmit({
            dataType: "json",
            success: function (data) {
                //返回数据处理
                console.log("传回数据：" + data);
            }
        });
        return false;
    }*/

        //保存图片后获取图片链接给book的iamge属性
            $("#submit").click(function () {
                $.ajax({
                    type: "POST",
                    url: "../uploadController/upload",
                    data: new FormData($("#addBookForm")[0]),//序列化表单值
                    async: false,
                    contentType: false,//必须有
                    processData: false,//必须有
                    error: function (request) {
                        alert("请求出错！");
                    },
                    success: function (data) {
                        console.log(data);
                    }
                });
            })


    /*$(function () {
        $('#myForm').submit(function () {
            $('#myForm').ajaxSubmit({
                beforeSubmit: validate,
                success: function(data) {
                    //返回数据处理
                    alert(data);
                }
            });
            return false;         //阻止表单默认提交
        });
    });*/


    $('#rightupload').change(function () {
        var file = $('#rightupload').get(0).files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            $('#usrightimg').get(0).src = e.target.result;
        }
    })
</script>
</body>
</html>